import {useParams} from "react-router-dom";
import {useLocalObservable, Observer} from "mobx-react";
import HomeStore from "../../store/HomeStore/HomeStore";
import {useEffect} from "react";

export default function Home(props:any){
    const {name='五角场街道'}=useParams<Record<string, string>>();
    const homeStore= useLocalObservable(()=>HomeStore);
    const closeClick=(e:any)=>{
        e.preventDefault();
        const win=window as any;
        const isFull:any = Math.abs(window.screen.height-window.document.documentElement.clientHeight) <= 17
        console.log('isFull', isFull);
        const el = document as any;
        const cfs = el.cancelFullScreen || el.mozCancelFullScreen || el.msExitFullscreen || el.webkitExitFullscreen || el.exitFullscreen
        console.log('cfs', cfs);
        if (cfs) { // typeof rfs != "undefined" && rfs
            cfs.call(el);
            setTimeout(function(){
                cfs.call(el);
            },500);
        }else if (typeof win.ActiveXObject !== 'undefined') {
            // for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
            let wScript = new win.ActiveXObject('WScript.Shell')
            if (wScript != null) {
                wScript.SendKeys('{F11}')
            }
        }
        return false;
    }
    const openClick=()=>{
        const el:any=document.documentElement as any;
        if (el.fullscreenEnabled) {
            el.requestFullscreen();
        } else if (el.webkitRequestFullScreen) {
            el.webkitRequestFullScreen();
        } else if (el.mozFullScreenEnabled) {
            el.mozRequestFullScreen();
        } else if (el.msFullscreenEnabled) {
            el.msRequestFullscreen();
        } else {
            console.log('Fullscreen API 不存在',)
        }
    };
    console.log('home')
    useEffect(()=>{
        console.log('home2');
    }, [])
    return (
        <Observer>
            {()=>(
                <>
                    <p>{name?name:""}</p>
                    <p>{homeStore.abc}</p>
                    <button onClick={openClick}>打开</button>
                    <button onClick={closeClick}>关闭</button>
                </>
            )}
        </Observer>
    );
}